<template>
    <view class="pop-up" v-if="show">
        <view class="pop" @click="close"> </view>
        <view class="pop-content">
            <view class="title">核销码</view>
            <!-- {{ "" + qrcode.use_code_image }} -->
            <image :src="imgUrl + qrcode.use_code_image" mode="scaleToFill" />
            <text style="display: block"> {{ qrcode.use_code }}</text>
        </view>
    </view>
</template>
<script>
let ctx = null;
export default {
    name: "",
    components: {},
    mixins: [],
    props: {
        /**
         * 是否显示弹窗
         */
        show: {
            type: Boolean,
            default: false,
        },
        /**
         * 核销码
         */
        qrcode: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            imgUrl: this.$imgUrl,
        };
    },
    computed: {},
    watch: {
        show() {
            if (this.show) {
                this.$emit("show", true);
            } else {
                this.$emit("show", false);
            }
        },
    },
    mounted() {},
    methods: {
        close() {
            this.$emit("close", false);
        },
    },
};
</script>
<style lang="scss" scoped>
.pop-up {
    width: 100%;
    height: 100%;
    .pop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background-color: rgba(0, 0, 0, 0.5);
        //禁止滑动
        touch-action: none;
    }
    .pop-content {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 520rpx;
        height: 500rpx;
        z-index: 100;
        background-color: #fff;
        touch-action: none;
        text-align: center;
        border-radius: 20rpx;
        .title {
            font-size: 36rpx;
            margin-top: 40rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
        }
        image {
            width: 300rpx;
            height: 300rpx;
            // margin-top: 40rpx;
        }
    }
}
</style>
